<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的个人主页</title>
</head>
<body>
    <h2>前端开发工程师 | 教师</h2>
    <ul>
        <li><a href="#about">关于我</a></li>
        <li><a href="#skills">技能</a></li>
        <li><a href="#education">教育背景</a></li>
        <li><a href="#contact">联系我</a></li>
    </ul>

    <hr>

    <h3 id="about">关于我</h3>
    <img src="图.png" alt="个人头像" width="100">
    <h4>个人简介</h4>
    <p>我是一名热爱前端开发的教师，拥有4年的网页开发经验。我专注于创建用户友好且响应式的网页设计。</p>
    <h4>联系方式</h4>
    <p>邮箱: <a href="mailto:sanri@example.com">sanri@example.com</a></p>
    <p>电话: +86 138 0000 8000</p>
    <p>地址: 天津市河西区</p>

    <hr>

    <h3 id="skills">技能展示</h3>
    <table border="1">
        <thead>
            <tr>
                <<th>技能</</th>
                <<th>熟练程度</</th>
                <<th>使用时间</</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>HTML</td>
                <td>█ █ █ █ █</td>
                <td>3年</td>
            </tr>
            <tr>
                <td>CSS</td>
                <td>█ █ █ █ █</td>
                <td>3年</td>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td>█ █ █ █</td>
                <td>2年</td>
            </tr>
            <tr>
                <td>响应式设计</td>
                <td>█ █ █ █</td>
                <td>2年</td>
            </tr>
        </tbody>
    </table>

    <hr>

    <h3 id="education">教育背景</h3>
    <table border="1">
        <thead>
            <tr>
                <<th>时间</</th>
                <<th>学校</</th>
                <<th>专业</</th>
                <<th>学历</</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2000-2007</td>
                <td>某某大学</td>
                <td>计算机科学与技术</td>
                <td>本科</td>
            </tr>
            <tr>
                <td>1997-1999</td>
                <td>某某高级中学</td>
                <td>理科</td>
                <td>高中</td>
            </tr>
        </tbody>
    </table>

    <hr>

    <h3>我的介绍视频</h3>
    <video controls width="300">
        <source src="art.mp4" type="video/mp4">
        您的浏览器不支持 video 标签。
    </video>

    <hr>

    <h3>我的工作环境音乐</h3>
    <audio controls>
        <source src="歌.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 标签。
    </audio>

    <hr>

    <h3 id="contact">联系我</h3>
    <form>
        <fieldset>
            <legend>个人信息</legend>
            <p>姓名: <input type="text" name="name"></p>
            <p>邮箱: <input type="email" name="email"></p>
            <p>电话: <input type="tel" name="phone"></p>
        </fieldset>

        <fieldset>
            <legend>留言板</legend>
            <p>留言时间: <input type="date" name="date"></p>
            <p>留言: <textarea name="message" rows="5" cols="30"></textarea></p>
            <p><input type="submit" value="提交"></p>
        </fieldset>
    </form>

    <hr>

    <footer>
        <p>© 2025 赵晶的个人主页. 保留所有权利.</p>
        <p>关注我: <a href="https://gitee.com">Gitee</a></p>
    </footer>
</body>
</html>
